<!-- ShopListView.vue -->
<template>
  <div class="shop-list-container">
    <!-- 页面标题与操作按钮 -->
    <div class="page-header">
      <h2>信息管理</h2>
      <el-button type="primary" @click="$router.push('/shop/create')">
        <el-icon><Plus /></el-icon>
        新增门店
      </el-button>
    </div>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
              v-model="searchForm.shopName"
              placeholder="请输入门店名称"
              clearable
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchForm.contactPhone"
              placeholder="请输入负责人联系方式"
              clearable
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-select
              v-model="searchForm.region"
              placeholder="请选择查询的省/市/区县"
              clearable
          >
            <el-option label="北京市" value="beijing"></el-option>
            <el-option label="上海市" value="shanghai"></el-option>
            <el-option label="广东省" value="guangdong"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
              v-model="searchForm.status"
              placeholder="请选择门店状态"
              clearable
          >
            <el-option label="开启" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 15px;">
        <el-col :span="6">
          <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-col>
        <el-col :span="18" class="button-group">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 店铺列表表格 -->
    <el-card class="table-card" style="margin-top: 20px;">
      <el-table
          :data="shopList"
          border
          stripe
          :header-cell-style="{background: '#f5f7fa'}"
          style="width: 100%;"
      >
        <el-table-column
            type="selection"
            width="55"
        ></el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="80"
        ></el-table-column>
        <el-table-column
            prop="shopName"
            label="门店名称"
            min-width="120"
        ></el-table-column>
        <el-table-column
            prop="address"
            label="商家地址"
            min-width="200"
        ></el-table-column>
        <el-table-column
            prop="phone"
            label="门店电话"
            width="120"
        ></el-table-column>
        <el-table-column
            prop="contactPerson"
            label="负责人"
            width="100"
        ></el-table-column>
        <el-table-column
            prop="contactPhone"
            label="联系电话"
            width="120"
        ></el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="160"
        ></el-table-column>
        <el-table-column
            prop="updateTime"
            label="更新时间"
            width="160"
        ></el-table-column>
        <el-table-column
            prop="status"
            label="启用状态"
            width="120"
        >
          <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
                disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="140"
        >
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
                type="text"
                size="small"
                text-color="#ff4d4f"
                @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination" style="margin-top: 15px; text-align: right;">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, ElConfirm } from 'element-plus';

// 路由实例
const router = useRouter();

// 搜索表单数据
const searchForm = reactive({
  shopName: '',
  contactPhone: '',
  region: '',
  status: '',
  dateRange: []
});

// 表格数据
const shopList = ref([
  {
    id: 120,
    shopName: '海底捞-世纪金源店',
    address: '远大路1号世纪金源购物中心西区5层',
    phone: '01088878786',
    contactPerson: '李大师',
    contactPhone: '12145003392',
    createTime: '2024-06-07 09:22:15',
    updateTime: '2024-06-07 09:22:15',
    status: '0'
  },
  {
    id: 119,
    shopName: '海底捞-翠微店',
    address: '北京市海淀区花园路2号牡丹宾馆北',
    phone: '010 6203 3112',
    contactPerson: '闫鹏宇',
    contactPhone: '13311003392',
    createTime: '2024-06-07 09:19:52',
    updateTime: '2024-06-07 09:19:52',
    status: '0'
  },
  {
    id: 118,
    shopName: '海底捞石景山店',
    address: '海底捞石景山店喜隆多',
    phone: '6789012',
    contactPerson: '小花花',
    contactPhone: '432112345',
    createTime: '2024-06-05 02:33:31',
    updateTime: '2024-06-05 02:33:31',
    status: '0'
  },
  {
    id: 117,
    shopName: '圣熙8号店',
    address: '北京市海淀区',
    phone: '18811223456',
    contactPerson: '张三',
    contactPhone: '1991881321',
    createTime: '2024-06-05 02:26:25',
    updateTime: '2024-06-05 02:26:25',
    status: '1'
  },
  {
    id: 116,
    shopName: '海底捞万柳购物中心店',
    address: '万柳书院店',
    phone: '18702836102',
    contactPerson: '小花花',
    contactPhone: '18702836102',
    createTime: '2024-06-05 01:21:21',
    updateTime: '2024-06-05 01:21:21',
    status: '1'
  }
]);

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(shopList.value.length);

// 搜索处理
const handleSearch = () => {
  // 实际项目中这里会调用API进行搜索
  console.log('搜索参数:', searchForm);
  // 模拟搜索后的分页重置
  currentPage.value = 1;
};

// 重置表单
const resetForm = () => {
  searchForm.shopName = '';
  searchForm.contactPhone = '';
  searchForm.region = '';
  searchForm.status = '';
  searchForm.dateRange = [];
};

// 状态变更
const handleStatusChange = (row) => {
  console.log('状态变更:', row.id, '新状态:', row.status);
  // 实际项目中这里会调用API更新状态
};

// 编辑操作
const handleEdit = (row) => {
  router.push({
    path: '/shop/edit',
    query: { id: row.id }
  });
};

// 删除操作
const handleDelete = (row) => {
  ElConfirm({
    title: '确认删除',
    message: `确定要删除门店"${row.shopName}"吗？`,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (confirm) => {
      if (confirm) {
        // 实际项目中这里会调用API删除
        const index = shopList.value.findIndex(item => item.id === row.id);
        if (index !== -1) {
          shopList.value.splice(index, 1);
          total.value = shopList.value.length;
          ElMessage.success('删除成功');
        }
      }
    }
  });
};

// 分页大小变更
const handleSizeChange = (val) => {
  pageSize.value = val;
};

// 页码变更
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.shop-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.search-card {
  padding: 15px 20px;
}

.button-group {
  text-align: right;
}

.table-card {
  padding: 10px 20px;
}

.pagination {
  margin-top: 15px;
}
</style>